<template>
  <view>
    <!-- 触发按钮 -->
    <!-- 省市选择器 -->
    <u-picker
      ref="areaPicker"
        :show="showPicker"
        :columns="columns"
        :value="selectedValues"
        @change="changeHandler"
        @confirm="onPickerConfirm"
        @cancel="onPickerCancel"
        title="请选择省市区"
    />
  </view>
</template>

<script>
export default {
  name: 'RegionSelection',

  // 1. 定义 props，接收父组件传递的 city、district
  props: {
    province: String,
        city: String,
        district: String
  },

  data() {
    return {
      showPicker: false,
      columns: [[], [], []],   // 三列：省份 / 城市 / 区
      selectedValues: ['', '', ''], // 当前选中的 [省, 市, 区]
      areaData: {},
      message: '请选择省市区'
    };
  },

  // 2. 监听父组件 props 的变化
  watch: {
    province(newVal) {
          console.log('子组件 watch: province 发生变化 ->', newVal);
          this.checkAll();
        },
        city(newVal) {
          console.log('子组件 watch: city 发生变化 ->', newVal);
          this.checkAll();
        },
        district(newVal) {
          console.log('子组件 watch: district 发生变化 ->', newVal);
          this.checkAll();
        }
  },

  created() {
    this.loadAreaData();
  },

  methods: {
	  shows(){
		this.showPicker:true
	  },
	  checkAll() {
	        // 如果省、市、区都有值，就向父组件通知
	        if (this.province && this.city && this.district) {
				this.message=this.province+','+this.city+','+this.district
	          this.$emit('selection-confirm', {
	            province: this.province,
	            city: this.city,
	            district: this.district
	          });
	        }
	      },
    // 加载行政区划数据
    loadAreaData() {
      try {
        // 这里用 require 加载 JSON（路径根据实际情况）
        const areaData = require('@/static/utils/pca.json');
        this.areaData = areaData;
        console.log('行政区划数据加载成功:', this.areaData);

        // 初始化省份列表
        this.initProvinceList();
      } catch (error) {
        console.error('加载行政区划数据失败:', error);
      }
    },

    // 初始化省列表
    initProvinceList() {
      const provinceNames = Object.keys(this.areaData);
      this.$set(this.columns, 0, provinceNames);

      if (provinceNames.length > 0) {
        // 默认选中第一项
        this.selectedValues[0] = provinceNames[0];
        // 然后初始化城市列
        this.initCityList(provinceNames[0]);
      }
    },

    // 初始化城市列表
    initCityList(provinceName) {
      const citiesObj = this.areaData[provinceName] || {};
      const cityNames = Object.keys(citiesObj);
      this.$set(this.columns, 1, cityNames);

      // 如果父组件传来的 city 在当前省份内，就优先选中它
      if (this.city && cityNames.includes(this.city)) {
        this.selectedValues[1] = this.city;
      } else {
        // 否则选第一个城市
        this.selectedValues[1] = cityNames[0] || '';
      }

      this.initDistrictList(provinceName, this.selectedValues[1]);
    },

    // 初始化区县列表
    initDistrictList(provinceName, cityName) {
       const districts = (this.areaData[provinceName]?.[cityName]) || [];
        this.$set(this.columns, 2, districts); // 更新第三列数据
      
        // 更新选中的区县
        if (districts.includes(this.district)) {
          this.selectedValues[2] = this.district; // 优先选中父组件传入的值
        } else {
          this.selectedValues[2] = districts[0] || ''; // 默认选第一个区
        }
    },

    // Picker 改变
    changeHandler(event) {
      
	  const { columnIndex, value, values } = event;
	  
	    if (columnIndex === 0) {
	      // 切换省份
	      const selectedProvince = value[0]; // 选中的省
	      this.selectedValues[0] = selectedProvince; // 更新省
	      this.selectedValues[1] = ''; // 重置市
	      this.selectedValues[2] = ''; // 重置区
	      this.initCityList(selectedProvince); // 初始化城市列表
	    } else if (columnIndex === 1) {
	      // 切换城市
	      const selectedProvince = this.selectedValues[0];
	      const selectedCity = value[1]; // 选中的市
	      this.selectedValues[1] = selectedCity; // 更新市
	      this.selectedValues[2] = ''; // 重置区
	      this.initDistrictList(selectedProvince, selectedCity); // 初始化区县列表
	    } else if (columnIndex === 2) {
	      // 切换区县
	      const selectedDistrict = value[2]; // 选中的区
	      this.selectedValues[2] = selectedDistrict; // 更新区
	    }
	  
	    // 更新 UI 显示（根据当前选中的省、市、区）
	    console.log('当前选中:', this.selectedValues);
    },

    // 点击确定按钮
    onPickerConfirm() {
      this.showPicker = false;

      // 拼接选中的省、市、区
      const [province, city, district] = this.selectedValues;
      this.message = [province, city, district].filter(Boolean).join(', ');
      console.log('选中的省市区名称:', this.message);

      // 通知父组件
      this.$emit('selection-confirm', {
        province,
        city,
        district
      });
    },

    onPickerCancel() {
      this.showPicker = false;
    }
  }
};
</script>

<style lang="scss">
.input_select {
  display: flex;
  align-items: center;
  input {
    padding-left: 20rpx;
    border-bottom: 1px solid darkgray;
    font-size: 26rpx;
    flex: 1;
    height: 100rpx;
    color: lightgrey;
  }
  .input-icon {
    width: 50rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -30rpx;
  }
}
</style>